class PopupNumbers {

    private _panel;
    private _targetCell;

    constructor(panel) {
        this._panel = panel.hide().removeClass('hidden');

        this._panel.on('click', 'span', e => {
            const span = $(e.target);
            const cell = this._targetCell;

            if (span.hasClass('mark1')) {
                if (cell.hasClass('mark1')) {
                    cell.removeClass('mark1');
                } else {
                    cell.removeClass('mark2')
                        .addClass('mark1');
                }
            } else if (span.hasClass('mark2')) {
                if (cell.hasClass('mark2')) {
                    cell.removeClass('mark2');
                } else {
                    cell.removeClass('mark1')
                        .addClass('mark2');
                }
            } else if (span.hasClass('empty')) {
                cell.text(0)
                    .addClass('empty');
            } else {
                cell.removeClass('empty')
                    .text(span.text());
            }

            this.hide();
        });
    }

    popup(cell) {
        this._targetCell = cell;
        const {left, top} = cell.position();
        this._panel.css({
            left: `${left}px`,
            top: `${top}px`,
        }).show();
    }

    hide() {
        this._panel.hide();
    }
}

export default PopupNumbers;
